<!--
 * @Author: malgee
 * @Date: 2025-04-27 09:16:32
 * @LastEditors: maling
 * @LastEditTime: 2025-04-27 13:50:41
 * @FilePath: /vue3-ts-cms/src/components/nav-header/src/user-info.vue
 * @Description: 
 * 
-->
 <template>
  <div class="user-info">
    <el-dropdown>
      <span class="el-dropdown-link">
        <el-avatar size="small" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"/>
        <span class="name">{{name}}</span>
      </span> 
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item icon="el-icon-circle-close" @click="handleExitClick">退出登录</el-dropdown-item>
          <el-dropdown-item icon="el-icon-user" divided>用户设置</el-dropdown-item>
          <el-dropdown-item icon="el-icon-setting">系统设置</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <mg-dialog ref="mgDialogRef" @onConfirm="handleConfirm">确定退出登录吗？</mg-dialog>
  </div>
 </template>

 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { useStore } from '@/store'
 import localCache from '@/utils/cache'
 import MgDialog from '@/components/dialog/mg-dialog.vue'
import router from '@/router'

 const store = useStore()
 const name = store.state.login.userInfo.name

 const mgDialogRef = ref()
 onMounted(() => {
    console.log('mgDialogRef',mgDialogRef.value); // Proxy {…}
});

 const handleExitClick = () => {
  mgDialogRef.value.open()
 }

 const handleConfirm = (isConfirm: boolean) => {
  if (isConfirm) {
    localCache.remove('token')
    router.push('/main')
  }
 }


 </script>
 
 <style lang="less" scoped>
 
.el-dropdown-link {
  // 指针
  cursor: pointer; 
  display: flex;
  align-items: center;
}

.name {
  margin-left: 5px;
}
 </style>